﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DataGrid 数据表格</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <!-- 多级排序 -->
    <script src="js/multisort.js" type="text/javascript"></script>
    
</head>
<body>

    <h1>表格多列排序</h1>     
 
    <div id="datagrid1" class="mini-datagrid" style="width: 800px; height: 280px;" allowresize="true"
        url="../data/AjaxService.aspx?method=SearchEmployeesByMultiSort" idfield="id" multiselect="true"
        allowSortColumn="false"
        >
        <div property="columns">
            <!--<div type="indexcolumn"></div>        -->
            <div type="checkcolumn">
            </div>
            <div field="loginname" width="120" headeralign="center" allowsort="true">
                员工帐号</div>
            <div field="name" width="120" headeralign="center" allowsort="true">
                姓名</div>
            <div header="工作信息">
                <div property="columns">
                    <div field="dept_name" width="120">
                        所属部门</div>
                    <div field="position_name" width="100">
                        职位</div>
                    <div field="salary" datatype="currency" currencyunit="￥" align="right" width="100"
                        allowsort="true">
                        薪资</div>
                </div>
            </div>
            <div field="createtime" width="100" headeralign="center" dateformat="yyyy-MM-dd"
                allowsort="true">
                创建日期</div>
            <div header="基本信息">
                <div property="columns"> 
                    <div field="age" width="100" allowsort="true">
                        年龄</div>
                    <div field="birthday" width="100" renderer="onBirthdayRenderer">
                        出生日期</div>
                    <div field="email" width="100">
                        邮箱</div>
                </div>
            </div>
            <div header="学历信息">
                <div property="columns">
                    <div field="educational_name" width="100">
                        学历</div>
                    <div field="school" width="120">
                        毕业院校</div>
                </div>
            </div>
        </div>
    </div>

    <div class="description">
        <h3>Description</h3>
        <ul>
            <li>点击表头进行多列排序</li>
            <li>后台需要自行处理多排序字段：sortFields=[{"field":"loginname","dir":"asc"},{"field":"name","dir":"asc"}]。</li>
        </ul>
    </div>


    <script type="text/javascript">
        mini.parse();



        /////////////////////////////////////////////////

        var grid = mini.get("datagrid1");
        grid.load()

        var sorter = new MultiSort(grid);
//        sorter.sort([                             //初始化时默认排序
//            { field: "name", dir: "asc" }
//        ]);

        
       
    </script>

</body>
</html>
